<template>
  <div>
    <el-dialog title="选择区域" :visible.sync="dialogFormVisible" center width="350px" :close-on-click-modal="false" style="height:400px;overflow:hidden">
      <el-form size="small">
        <el-form-item label="使用区域">
          <el-select v-model="region">
            <el-option v-for="item in gift_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="save()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    area_type: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      region: null,
      gift_list: [
        { name: '礼品机区域', id: 1 },
        { name: '礼品柜区域', id: 2 },
        { name: '摊位机区域', id: 3 },
        { name: '企划区域', id: 4 },
        { name: '其他区域', id: 5 }
      ]
    };
  },
  watch: {
    area_type(val) {
      let region = val.area_type?(val.area_type > 100 ? val.area_type / 100 : val.area_type / 1):'';
      this.region=region==0?'':region;
    }
  },
  methods: {
    show() {
      this.dialogFormVisible = true;
    },
    save() {
      if(!this.region){
        this.$message.error('请选择使用区域');
        return ;
      }
      this.$emit('change_area_type', this.region, this.area_type);
      this.dialogFormVisible = false;
    }
  }
};
</script>
